import React, { useState, useRef } from 'react';
import { Input, Button, Form, Pagination, Empty, Avatar } from "antd";
import styles from "./firm.less";
import { connect, Link } from 'umi';
import { Icon } from '@ant-design/compatible';
import imgUrl from "@/assets/contactbac.jpg";

const tabArr = [
    {
        path: '/firm/homepage',
        name: '首页'
    },
    {
        path: '/firm/products',
        name: '产品列表'
    },
    {
        path: '/firm/case',
        name: '成功案例'
    },
    {
        path: '/firm/record',
        name: '诚信档案'
    },
    {
        path: '/firm/company',
        name: '公司信息'
    },
    {
        path: '/firm/contact',
        name: '联系方式'
    }
]
const Firm = ({ location, children }) => {
    let { pathname } = location;
    return (
        <div>
            <div className={styles.topHeader} style={{ backgroundImage: `url(${require("@/assets/home.png")})` }}>
                <div className="content row" style={{ height: "100%" }}>
                    <div style={{ flexShrink: 0 }}>
                        <Avatar
                            src={imgUrl}
                            shape="square"
                            style={{ borderRadius: 22, marginRight: 22 }}
                            size={74}
                        />
                    </div>
                    <div className={styles.rightContent}>
                        <div>
                            <p className={styles.leftTitle}>
                                <span title="语雀的天空" className={styles.title}>语雀的天空语雀的天空语雀的天空</span>
                                <Icon type="sketch" style={{ color: "#fff", marginRight: 3 }} />
                                <span style={{ color: "#fff" }}>1</span>
                            </p>
                            <span className="oneline" title="123" style={{ color: "#eee", fontSize: 12 }}>umi 是一个可插拔的企业级 react 应用框架。 插件化 umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成</span>
                        </div>
                        <div className={styles.tabList}>
                            {
                                tabArr.map(item => {
                                    return (
                                        <div key={item.path} className={`${pathname.indexOf(item.path) > -1 ? styles.activeTab : ""}`}>
                                            <Link to={item.path}>{item.name}</Link>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
            {children}
        </div>

    )
}

export default Firm;